<template>
  <div class="shell">
    <div class="manager-shell">
      <h3>管理游戏</h3>
      <div class="game-container">
        <div class="top">
          <div class="game-status">
            <el-button type="success" plain :class="{ 'active-btn': currentContainer === 1 }"
              @click="showContainer(1)">审核通过({{ length1 }})</el-button>
            <el-button type="warning" plain :class="{ 'active-btn': currentContainer === 0 }"
              @click="showContainer(0)">审核中({{ length0 }})</el-button>
            <el-button type="danger" plain :class="{ 'active-btn': currentContainer === 2 }"
              @click="showContainer(2)">审核不通过({{ length2 }})</el-button>
            <el-button type="info" plain :class="{ 'active-btn': currentContainer === 3 }"
              @click="showContainer(3)">已下架({{ length3 }})</el-button>
          </div>
          <el-pagination :current-page="currentPage" :page-size="pageSize" :total="totalGames" :pager-count="5"
            layout=" prev, pager, next" @current-change="handleCurrentChange" background>
          </el-pagination>
        </div>

        <!-- 添加加载状态判断 -->
        <div v-if="isLoading" class="gameInfo-container">
          <div style="text-align: center; line-height: 500px; background-color:  #181F2D;">
            <h1>数据加载中</h1>
          </div>
        </div>
        <div v-else>
          <GameInfoCard v-for="game in filteredGameList" :key="game.gid" :data="game"
            @update-game="handleUpdateGames" />
        </div>
      </div>
      <div style="height: 100px"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import GameInfoCard from '@/components/gameInfoCard.vue';
import { myAxios } from '@/axios/index';

// 当前显示的容器编号
const currentContainer = ref(1);

// 显示指定容器的方法
const showContainer = (index) => {
  currentContainer.value = index;
  fetchGames(index, true);
};

// 加载状态
const isLoading = ref(true);

const gameList = ref([]);
const length0 = ref(0);
const length1 = ref(0);
const length2 = ref(0);
const length3 = ref(0);

// 分页相关变量
const currentPage = ref(1);
const pageSize = ref(3);
const totalGames = ref(0);

// 计算过滤后的游戏列表
const filteredGameList = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  const endIndex = startIndex + pageSize.value;
  return gameList.value.slice(startIndex, endIndex);
});

// 处理当前页码变化事件
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
};

const fetchGames = async (status, updateGameList = false) => {
  try {
    isLoading.value = true;
    const response = await myAxios.get('/goodsAdmin/getInfo', {
      params: {
        status: status,
      }
    });

    // 检查 response.data.data 是否为数组
    if (Array.isArray(response.data.data)) {
      if (updateGameList) {
        gameList.value = response.data.data;
      }
      // console.log("游戏列表",  gameList.value);
      // 根据 status 更新对应的 length 变量
      switch (status) {
        case 0:
          length0.value = response.data.data.length;
          break;
        case 1:
          length1.value = response.data.data.length;
          break;
        case 2:
          length2.value = response.data.data.length;
          break;
        case 3:
          length3.value = response.data.data.length;
          break;
        default:
          console.warn('Unexpected status:', status);
      }
    } else {
      console.warn('response.data.data is not an array:', response.data.data);
      if (updateGameList) {
        gameList.value = [];
      }
    }

    if (updateGameList) {
      totalGames.value = gameList.value.length;
      currentPage.value = 1; // 重置页码
    }
  } catch (error) {
    console.error('Error fetching games:', error);
    if (updateGameList) {
      gameList.value = [];
    }
  } finally {
    isLoading.value = false;
  }
};

// 处理子组件触发的事件
const handleUpdateGames =  (showStatus, fetchStatus) => {
  fetchGames(fetchStatus);

  // 展示状态
  showContainer(showStatus);
  // console.log("最终展示的数据", gameList.value); // 此时数据已正确更新

};

onMounted(() => {
  fetchGames(3);
  fetchGames(2);
  fetchGames(0);
  fetchGames(1);
  showContainer(1);
});
</script>

<style lang="less" scoped>
.shell {
  height: calc(100vh - 72px);
  width: 100%;

  .manager-shell {
    max-width: 960px;
    margin: 0px auto;
    height: 100%;
    // background-color: #172636;
    padding: 10px;
    box-sizing: border-box;

    h3 {
      padding: 20px;
      color: rgb(26, 159, 255) !important;
    }

    label {
      color: #9fa9b5;
      margin-bottom: 5px;
    }

    .container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
      padding-left: 100px;
      margin-bottom: 20px;

      .gameInfo {
        display: flex;
        flex-direction: row;
        height: 210px;

        .cover-img-container {
          width: 200px;
          height: 200px;
          margin-right: 50px;

          .cover-img {
            width: 175px;
            height: 175px;
            background-color: white;
            border-radius: 5px;
            margin-top: 5px;


            .avatar-uploader {
              width: 175px;
              height: 175px;
              display: block;
            }

            .avatar-uploader .el-upload {
              border: 1px dashed var(--el-border-color);
              border-radius: 6px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
              transition: var(--el-transition-duration-fast);
            }

            .avatar-uploader .el-upload:hover {
              border-color: var(--el-color-primary);
            }

            .el-icon.avatar-uploader-icon {
              font-size: 28px;
              color: #8c939d;
              width: 175px;
              height: 175px;
              text-align: center;
            }

            .avatar {
              width: 175px;
              height: 175px;

              text-align: center;
              object-fit: contain;
            }
          }
        }

        ul {
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-gap: 15px;
          width: 60%;
          height: 200px;

          li {
            display: flex;
            flex-direction: column;
            width: 180px;
            height: 60px;
            justify-content: space-between;
          }

          .choose-container {
            display: flex;

            .el-button {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }

            span {
              width: 30px;
              text-align: center;
              line-height: 30px;
              color: white;
            }
          }

          .bigli {
            width: 200px;
            height: 95px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .tags {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              height: 40px;

              .tag {
                margin-top: 5px;
                margin-right: 5px;
                margin-left: 0px;
                margin-bottom: 0px;
              }
            }

            .el-upload__tip {
              margin-left: 5px;
              color: #7f868f;
              font-size: 10px
            }

            .el-upload-list__item-name {
              background-color: white;
            }
          }
        }
      }

      .desc {
        margin-top: 30px;
        width: 80%;

        /deep/ .el-textarea__inner {
          margin-top: 10px;
          width: 620px;
          height: 100px;
        }
      }

      .img-container {
        margin-top: 10px;
        height: 160px;

        display: flex;
        justify-content: space-between;
        flex-direction: row;

        .imgs {
          display: flex;
          flex-direction: row;
          height: 100%;

          .la {
            margin-top: 5px;
          }

          .icon-container {
            width: 120px;
            margin-right: 20px;

            .icon-div {
              background-color: white;
              border-radius: 5px;
              width: 110px;
              height: 110px;
              margin-top: 5px;

              .icon-uploader {
                width: 110px;
                height: 110px;
                display: block;
              }

              .icon-uploader .el-upload {
                border: 1px dashed var(--el-border-color);
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                transition: var(--el-transition-duration-fast);
              }

              .icon-uploader .el-upload:hover {
                border-color: var(--el-color-primary);
              }

              .el-icon.icon-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 110px;
                height: 110px;
                text-align: center;
              }

              .icon {
                width: 110px;
                height: 110px;

                text-align: center;
                object-fit: contain;
              }
            }
          }

          .imgs-container {
            width: 600px;

            :deep(.el-upload--picture-card) {
              width: 110px;
              height: 110px;
            }

            :deep(.el-upload-list--picture-card .el-upload-list__item) {
              width: 110px;
              height: 110px;
            }
          }
        }
      }

      .btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 100px;

        .el-button {
          width: 100px;
        }
      }
    }




    .game-container {
      display: inline;
      margin: 0 auto;

      .top {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        height: 50px;
        margin-bottom: 8px;

        .game-status {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          padding-left: 10px;

          .el-button {
            transition: background-color 0.3s ease, color 0.3s ease;

            &.active-btn {
              background-color: var(--el-color-primary);
              color: white;
              transition: background-color 0.3s ease, color 0.3s ease;
            }
          }

        }
      }


    }

    .gameInfo-container {
      width: 100%;
      background-color: white;
      min-height: 500px;
    }

  }


}
</style>